<template>
  <view class="modifySupplier">
    <view class="modifySupplier-top">
      <view class="top-title">更改推荐人</view>
      <view class="top-search">
        <view class="top-search-input">
          <view class="input-img"
            ><image src="@/static/my/search-img.png" mode="widthFix"></image
          ></view>
          <up-input
            placeholder="请输入推荐您的用户手机号码"
            border="none"
            clearable
            v-model="keyword"
            @confirm="phoneSearch"
          >
          </up-input>
          <view
            :class="keyword.length == 11 ? 'bt-text1 bt-text' : 'bt-text1'"
            @click="phoneSearch"
            >查询</view
          >
        </view>
      </view>
    </view>
    <view v-if="!showCard">
      <view class="search-title">请先搜索用户</view>
      <view class="footer-bt">
        <view class="bt-submit">修改归属</view>
      </view>
    </view>

    <view class="footer-card" v-if="showCard">
      <view class="user-card-img">
        <image :src="cardData.avatar" mode="widthFix"></image>
      </view>
      <view
        class="user-card-identity"
        :class="
          cardData.level_id == 101
            ? 'user-card-identity'
            : cardData.level_id == 201
            ? 'shopkeeper'
            : cardData.level_id == 301
            ? 'distributor'
            : cardData.level_id == 401
            ? 'serviceCentre'
            : cardData.level_id == 501
            ? 'serviceCentre'
            : cardData.level_id == 601
            ? 'serviceCentre'
            : ''
        "
      >
        <image :src="cardData.level_icon" mode="widthFix"></image
      ></view>
      <view class="user-card-name">{{ cardData.nickname }}</view>

      <view class="user-card-info">
        <view class="info-id">ID：{{ cardData.uid }} </view>
        <view class="info-phone">手机号：{{ cardData.phone }}</view>
      </view>
      <view class="footer-btn" @click="screen">修改归属</view>
    </view>

    <!-- 修改归属弹框 -->
    <view class="password_show">
      <u-popup
        :show="showPopup"
        mode="center"
        round="10"
        @close="close"
        @open="open"
      >
        <view class="changeOwnership">
          <view class="popup-content-title">修改归属</view>
          <view class="user-card-img">
            <image :src="cardData.avatar" mode="widthFix"></image>
          </view>
          <view
            class="user-card-identity"
            :class="
              cardData.level_id == 101
                ? 'user-card-identity'
                : cardData.level_id == 201
                ? 'shopkeeper'
                : cardData.level_id == 301
                ? 'distributor'
                : cardData.level_id == 401
                ? 'serviceCentre'
                : cardData.level_id == 501
                ? 'serviceCentre'
                : cardData.level_id == 601
                ? 'serviceCentre'
                : ''
            "
          >
            <image :src="cardData.level_icon" mode="widthFix"></image
          ></view>
          <view class="user-card-name">{{ cardData.nickname }}</view>

          <view class="user-card-info">
            <view class="info-id">ID：{{ cardData.uid }} </view>
            <view class="info-phone">手机号：{{ cardData.phone }}</view>
          </view>

          <view class="popup-content-box">
            <view class="popup-content-bt">
              <view class="popup-content-qx" @click="showPopup = false"
                >取消</view
              >
              <view class="popup-content-cl" @click="popupSubmit">确定</view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>

  <Verify
    @success="success"
    :captchaType="'blockPuzzle'"
    :imgSize="{ width: '330px', height: '155px' }"
    ref="sliderVerify"
  ></Verify>
</template>

<script setup>
import { inject, ref } from "vue";
import { userqueryUser, editReferrerApi } from "@/services/user";
import { useUserStore } from "@/stores/user.js";
import Verify from "@/pages/components/verify/verify.vue";
const user = useUserStore();
// 用户信息数据
const referrer = ref("");
// 创建响应式数据
const keyword = ref("");
const showPopup = ref(false);
const showCard = ref(false);
const cardData = ref("");

//验证码
const sliderVerify = ref(null);

const success = async (data) => {
  sliderVerify.value.hide();

  try {
    let res = await userqueryUser({
      phone: keyword.value,
      captchaType: "blockPuzzle",
      captchaVerification: data.captchaVerification,
    });
    if (res.code == 200) {
      uni.showToast({
        title: "查询成功",
        icon: "success",
      });
      showCard.value = true;
      cardData.value = res.data;
    }
  } catch (e) {
    cardData.value = "";
    showCard.value = false;
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }

  // this.code(data);
};

const phoneSearch = async () => {
  if (keyword.value.length != 11) {
    uni.showToast({
      title: "手机号码格式不正确",
      icon: "none",
    });
    return;
  }
  sliderVerify.value.show();
  return;
  try {
    let res = await userqueryUser({ phone: keyword.value });
    if (res.code == 200) {
      uni.showToast({
        title: "查询成功",
        icon: "success",
      });
      showCard.value = true;
      cardData.value = res.data;
    }
  } catch (e) {
    cardData.value = "";
    showCard.value = false;
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }
};

const close = () => {
  showPopup.value = false;
};

const screen = () => {
  showPopup.value = true;
};

// 修改归属
const popupSubmit = async () => {
  try {
    let res = await editReferrerApi({ referrer_id: cardData.value.uid });
    if (res.code == 200) {
      uni.showToast({
        title: res.info,
        icon: "success",
      });
      showPopup.value = true;
      user.userInfo.referrer = cardData.value;
      setTimeout(() => {
        //返回上一页面
        uni.navigateBack({
          delta: 1, // 返回的页面数
        });
      }, 1000);
    }
  } catch (e) {
    showPopup.value = false;
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }
};
</script>

<style lang="scss" scoped>
@import "./modifySupplier.scss";
</style>
